<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style type="text/css">
                canvas{
                    border: 1px solid red;
                }
            </style>
        </head>
<body>
<canvas ID="box" width="500" height="500">您的浏览器不支持画布</canvas>

</body>
<script type="text/javascript">
    //通过画布获取画布
    var box=document.getElementById("box");
    var pen=box.getContext("2d");
    //清除画布
    pen.clearRect(0,0,box.width,box.height);
    pen.moveTo(214,287);
    pen.bezierCurveTo(4,120,105,33,217,123);
    pen.moveTo(217,123);
    pen.bezierCurveTo(295,35,459,96,214,287);
    pen.fillStyle="red";
    pen.fill();
    pen.stroke();






</script>
</html>